<template>
    <div class="payment">
        <van-nav-bar title="收银台" :border="false"
                     left-arrow fixed placeholder
                     @click-left="$router.back()"/>
        <div class="payment-amount van-hairline--top">
            <price :value="totalAmount" :size="32"/>
        </div>
        <white-space/>
        <van-cell v-for="method in methods" :key="method.code" center clickable
                  title-class="payment-method-title"
                  @click="selectedMethod = method">
            <template #title>
                <van-image :width="26" :src="method.logo"/>
                <wing-blank>{{method.name}}</wing-blank>
            </template>
            <template #extra>
                <van-checkbox :value="selectedMethod === method"/>
            </template>
        </van-cell>
        <div class="payment-buttons van-hairline--top">
            <van-button type="primary" round block @click="handlePay" :loading="payLoading">
                {{selectedMethod.name}}
                <price :value="totalAmount" :size="14" color="#fff"/>
            </van-button>
        </div>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { Button, Cell, Checkbox, Image, NavBar, Toast } from "vant"
  import Price from "@/components/Price"
  import WhiteSpace from "@/components/WhiteSpace"
  import { message, order, payment } from "@mall/api-services"
  import WingBlank from "@/components/WingBlank"

  export default {
    name: "Payment",
    components: {
      WingBlank,
      WhiteSpace,
      Price,
      [Button.name]: Button,
      [Cell.name]: Cell,
      [Checkbox.name]: Checkbox,
      [NavBar.name]: NavBar,
      [Image.name]: Image,
    },
    props: {
      orderIds: String,
      totalAmount: [String, Number],
    },
    watch: {
      methods(methods) {
        const firstMethod = _.first(methods)
        if (firstMethod) {
          this.selectedMethod = firstMethod
        }
      },
    },
    data() {
      return {
        methods: [],
        payLoading: false,
        selectedMethod: new payment.PaymentMethodDescription(),
      }
    },
    created() {
      this.refresh()
    },
    methods: {
      handlePay() {
        if (this.payLoading) {
          return
        }
        const { orderIds, selectedMethod } = this
        const { OrderServiceV1, OrderPayment } = order
        const { PaymentInstrument, PaymentServiceV1 } = payment
        const instrument = new PaymentInstrument()
        instrument.type = selectedMethod.code
        const aPayment = new OrderPayment()
        aPayment.orderIds = _.isArray(orderIds) ? orderIds : _.split(orderIds, ",")
        aPayment.returnUrl = window.location.origin + "/payments/{payment_id}"
        aPayment.instrument = instrument
        this.payLoading = true
        OrderServiceV1.startOrderPayment(aPayment)
          .then(nPayment => nPayment.id)
          .then(paymentId => PaymentServiceV1.redirectPayment(paymentId))
          .then(redirect => window.location.replace(redirect))
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.payLoading = false)
      },
      refresh() {
        payment.PaymentMethodServiceV1
          .getPaymentMethods().enable().list()
          .then(aMethods => this.methods = aMethods)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .payment {
        .payment-amount {
            padding: 10px;
            text-align: center;
            background: #fff;
        }

        .payment-method-title {
            display: flex;
            align-items: center;
            height: 34px;
        }

        .payment-buttons {
            padding: 10px 20px;
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            background: #fff;
        }

    }
</style>
